<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { QuillEditor } from '@vueup/vue-quill'
import { getItemCategoryApi } from '@/api/category'
import { addApi } from '@/api/item'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
const dialogFormData = ref({
  itemTitle: null,
  subTitle: null,
  categoryId: [],
  categoryId1: null,
  categoryId2: null,
  categoryId3: null,
  spuId: null,
  categoryName: null,
  description: null,
  itemxq: null,
  supplierName: null,
  brandName: null,
  skuList: []
})
const addSkuList = () => {
  dialogFormData.value.skuList.push({
    commodityCode: null,
    itemName: null,
    realPrice: null,
    code: null,
    title: null,
    productWeight: null,
    productLength: null,
    productWidth: null,
    productHeight: null,
    productVolume: null,
    price: null,
  })
}
const removeSku = (index) => {
  dialogFormData.value.skuList.splice(index, 1)
}

const cascaderProps = {
  expandTrigger: 'hover',
  value: 'categoryId',      
  label: 'categoryName',    
  children: 'children' 
}
const handleChange = (value) => {
  console.log(value)
  if (value && value.length >= 1) {
    dialogFormData.value.categoryId1 = value[0]
  }
  if (value && value.length >= 2) {
    dialogFormData.value.categoryId2 = value[1]
  }
  if (value && value.length >= 3) {
    dialogFormData.value.spuId = value[2]
  }
}
const categoryList = ref([])
const getItemCategory = async () => {
  let res = await getItemCategoryApi()
  categoryList.value = res
}
const save = async () => {
  let res = await addApi(dialogFormData.value)
  if (res) {
    ElMessage.success('操作成功！')
  } else {
    ElMessage.error('操作失败！')
  }
}
onMounted(() => {
  getItemCategory()
})
</script>
<template>
  <el-container class="layout-container-demo" style="height: 500px">
    <el-aside width="200px">
      <el-form :model="dialogFormData">
        <el-scrollbar>
          <el-form-item>
            <el-input v-model="dialogFormData.itemTitle" placeholder="商品标题"
              style="width: 150px; min-height: 50px; margin-left: 20px; margin-top: 20px;" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="dialogFormData.subTitle" placeholder="副标题"
              style="width: 150px; min-height: 50px; margin-left: 20px; margin-top: 20px;" />
          </el-form-item>
          <el-form-item>
            <div>
              <el-cascader v-model="dialogFormData.categoryId" :options="categoryList" :props="cascaderProps"
                @change="handleChange" clearable
                style="width: 150px; min-height: 50px; margin-left: 20px; margin-top: 20px;" />
            </div>
          </el-form-item>
          <el-form-item>
            <el-input v-model="dialogFormData.description" placeholder="商品描述"
              style="width: 150px; min-height: 50px; margin-left: 20px; margin-top: 20px;" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="dialogFormData.xq" placeholder="商品详情"
              style="width: 150px; min-height: 50px; margin-left: 20px; margin-top: 20px;" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="dialogFormData.supplierName" placeholder="请选择品牌"
              style="width: 150px; min-height: 50px; margin-left: 20px; margin-top: 20px;">
              <el-option label="naike" value="1" />
              <el-option label="adidas" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item prop="supplierName">
            <el-select v-model="dialogFormData.supplierName" placeholder="请选择供应商"
              style="width: 150px; min-height: 50px; margin-left: 20px; margin-top: 20px;">
              <el-option label="武汉工厂" value="1" />
              <el-option label="江西工厂" value="2" />
            </el-select>
          </el-form-item>
        </el-scrollbar>
      </el-form>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-button type="primary" @click="addSkuList()" style="margin-top: 10px;">+</el-button>
        <el-button type="success" @click="save()" style="margin-top: 10px;">保存</el-button>
      </el-header>
      <el-main>
        <el-scrollbar>
          <div style="width: 100%; overflow-x: auto;">
            <table style="min-width: 1400px; border-collapse: collapse;">
              <thead>
                <tr style="background-color: #f5f7fa;">
                  <th style="width: 120px; padding: 10px; border: 1px solid #ebeef5;">商品编码</th>
                  <th style="width: 120px; padding: 10px; border: 1px solid #ebeef5;">商品条码</th>
                  <th style="width: 150px; padding: 10px; border: 1px solid #ebeef5;">商品标题</th>
                  <th style="width: 80px; padding: 10px; border: 1px solid #ebeef5;">重量</th>
                  <th style="width: 80px; padding: 10px; border: 1px solid #ebeef5;">长度</th>
                  <th style="width: 80px; padding: 10px; border: 1px solid #ebeef5;">宽度</th>
                  <th style="width: 80px; padding: 10px; border: 1px solid #ebeef5;">高度</th>
                  <th style="width: 80px; padding: 10px; border: 1px solid #ebeef5;">体积</th>
                  <th style="width: 100px; padding: 10px; border: 1px solid #ebeef5;">单价</th>
                  <th style="width: 100px; padding: 10px; border: 1px solid #ebeef5;">真实价格</th>
                  <th style="width: 80px; padding: 10px; border: 1px solid #ebeef5;">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(sku, index) in dialogFormData.skuList" :key="index">
                  <td style="padding: 8px; border: 1px solid #ebeef5;">
                    <el-input v-model="sku.commodityCode" size="small" />
                  </td>
                  <td style="padding: 8px; border: 1px solid #ebeef5;">
                    <el-input v-model="sku.code" size="small" />
                  </td>
                  <td style="padding: 8px; border: 1px solid #ebeef5;">
                    <el-input v-model="sku.title" size="small" />
                  </td>
                  <td style="padding: 8px; border: 1px solid #ebeef5;">
                    <el-input v-model="sku.productWeight" size="small" />
                  </td>
                  <td style="padding: 8px; border: 1px solid #ebeef5;">
                    <el-input v-model="sku.productLength" size="small" />
                  </td>
                  <td style="padding: 8px; border: 1px solid #ebeef5;">
                    <el-input v-model="sku.productWidth" size="small" />
                  </td>
                  <td style="padding: 8px; border: 1px solid #ebeef5;">
                    <el-input v-model="sku.productHeight" size="small" />
                  </td>
                  <td style="padding: 8px; border: 1px solid #ebeef5;">
                    <el-input v-model="sku.productVolume" size="small" />
                  </td>
                  <td style="padding: 8px; border: 1px solid #ebeef5;">
                    <el-input v-model="sku.price" size="small" />
                  </td>
                  <td style="padding: 8px; border: 1px solid #ebeef5;">
                    <el-input v-model="sku.realPrice" size="small" />
                  </td>
                  <td style="padding: 8px; border: 1px solid #ebeef5; text-align: center;">
                    <el-button type="danger" icon="Delete" circle size="small" @click="removeSku(index)" />
                  </td>
                </tr>

                <tr v-if="dialogFormData.skuList.length === 0">
                  <td colspan="11" style="padding: 20px; text-align: center; border: 1px solid #ebeef5;">
                    暂无商品数据，请点击上方"+"按钮添加
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>
<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}
</style>